<template>
  <div class="peopleManagement_box">
    <div style="display: flex; justify-content: space-between">
      <div>人员管理</div>
      <el-button type="primary" @click="showCreatePeopleModel">新增</el-button>
    </div>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
      <el-table-column property="name" label="姓名" width="200" />
      <!-- 性别返回 0 修改成 男性 -->
      <el-table-column property="sex" label="性别" width="120" />
      <el-table-column property="phone" label="手机号" width="240" />
      <el-table-column property="department" label="所在部门" width="120" />
      <el-table-column property="position" label="职位" width="120" />
      <el-table-column property="entryTime" label="入职时间" width="240" />
      <el-table-column property="status" label="目前状态" width="240" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.status === '在职'" type="success">在职</el-tag>
          <el-tag v-if="scope.row.status === '兼职'" type="warning">兼职</el-tag>
          <el-tag v-if="scope.row.status === '离职'" type="danger">离职</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="address" label="操作" width="240">
        <template #default="scope">
          <el-button size="small" type="success" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          <el-button size="small" type="warning" @click="handleEditDetail(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          <el-button size="small" type="danger" @click="showDeleteTip(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
      <template #header> 确定删除吗？ </template>
      <!-- <span>确定删除吗？</span> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDelete()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog v-model="dialogOverflowVisible" title="Tips" width="680" draggable overflow>
      <template #header> 用户详情 </template>
      <div>
        <el-form style="max-width: 600px" status-icon label-width="auto" class="demo-ruleForm" disabled>
          <el-row>
            <el-col :span="11">
              <el-form-item label="姓名:" prop="name">
                <el-input v-model="showUserDetail.name" type="text" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="性别:" prop="sex">
                <el-input v-model="showUserDetail.sex" type="text" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="出生年月：" prop="birth">
                <el-input v-model.number="showUserDetail.birth" /> </el-form-item></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="手机号：" prop="phone">
                <el-input v-model.number="showUserDetail.phone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="政治面貌：" prop="political">
                <el-input v-model.number="showUserDetail.political" /> </el-form-item></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="学历学校：" prop="education">
                <el-input v-model.number="showUserDetail.education" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="所在部门：" prop="department">
                <el-input v-model.number="showUserDetail.department" /> </el-form-item></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="职位：" prop="position">
                <el-input v-model.number="showUserDetail.position" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="入职时间：" prop="entryTime">
                <el-input v-model.number="showUserDetail.entryTime" /> </el-form-item></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="目前状态：" prop="status">
                <el-input v-model.number="showUserDetail.status" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogOverflowVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog v-model="editDialogOverflowVisible" title="Tips" width="680" draggable overflow>
      <template #header> 用户详情 </template>
      <div>
        <el-form style="max-width: 600px" status-icon label-width="auto" class="demo-ruleForm">
          <el-row>
            <el-col :span="11">
              <el-form-item label="姓名:" prop="name">
                <el-input v-model="showUserDetail.name" type="text" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <!-- <el-form-item label="性别:" prop="sex">
                <el-input v-model="showUserDetail.sex" type="text" autocomplete="off" />
              </el-form-item> -->
              <el-form-item label="性别:" prop="sex">
                <el-select v-model="showUserDetail.sex" placeholder="请选择">
                  <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <!-- <el-form-item label="出生年月：" prop="birth">
                <el-input v-model.number="showUserDetail.birth" /> 
              </el-form-item> -->
              <el-form-item label="出生年月：" prop="birth">
                <el-date-picker v-model="showUserDetail.birth" type="date" placeholder="请选择日期" @change="choseBirth"
                  format="YYYY/MM/DD" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="手机号：" prop="phone">
                <el-input v-model.number="showUserDetail.phone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="政治面貌：" prop="political">
                <el-input v-model.number="showUserDetail.political" /> </el-form-item></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="学历学校：" prop="education">
                <el-input v-model.number="showUserDetail.education" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="所在部门：" prop="department">
                <el-input v-model.number="showUserDetail.department" /> </el-form-item></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="职位：" prop="position">
                <el-input v-model.number="showUserDetail.position" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <!-- <el-form-item label="入职时间：" prop="entryTime">
                <el-input v-model.number="showUserDetail.entryTime" />
              </el-form-item> -->
              <el-form-item label="入职时间：" prop="entryTime">
                <el-date-picker v-model="showUserDetail.entryTime" type="date" placeholder="请选择日期"
                  format="YYYY/MM/DD" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <!-- <el-form-item label="目前状态：" prop="status">
                <el-input v-model.number="showUserDetail.status" />
              </el-form-item> -->
              <el-form-item label="目前状态：" prop="status">
                <el-select v-model="showUserDetail.status" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogOverflowVisible = false" type="success">关闭</el-button>
          <el-button @click="editUserInfo" type="primary">编辑</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog v-model="createDialogOverflowVisible" title="Tips" width="680" draggable overflow>
      <template #header> 用户详情 </template>
      <div>
        <el-form ref="ruleFormRef" style="max-width: 600px" status-icon label-width="auto" class="demo-ruleForm"
          :rules="rules" label-position="top" :model="userDetail">
          <el-row>
            <el-col :span="11">
              <el-form-item label="姓名:" prop="name">
                <el-input v-model="userDetail.name" type="text" autocomplete="off" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="性别:" prop="sex">
                <el-select v-model="userDetail.sex" placeholder="请选择">
                  <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="出生年月：" prop="birth">
                <el-date-picker v-model="userDetail.birth" type="date" placeholder="请选择日期" @change="choseBirth"
                  format="YYYY/MM/DD" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="手机号：" prop="phone">
                <el-input v-model.number="userDetail.phone" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="政治面貌：" prop="political">
                <el-input v-model.number="userDetail.political" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="学历学校：" prop="education">
                <el-input v-model.number="userDetail.education" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="所在部门：" prop="department">
                <!-- <el-tree style="max-width: 600px" :data="data" accordion show-checkbox node-key="id" :props="defaultProps" /> -->
                <el-input v-model.number="userDetail.department" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="职位：" prop="position">
                <el-input v-model.number="userDetail.position" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="入职时间：" prop="entryTime">
                <el-date-picker v-model="userDetail.entryTime" type="date" placeholder="请选择日期" format="YYYY/MM/DD" />
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-form-item label="目前状态：" prop="status">
                <el-select v-model="userDetail.status" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="createDialogOverflowVisible = false">取消</el-button>
          <el-button @click="handleSubmit" type="primary">完成</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import webRequest from "../utils/request";
import { ElNotification, ElMessage } from "element-plus";
export default {
  // 在这里定义了 Vue 组件的 setup 函数，用于设置组件的初始状态和响应式数据
  setup() {
    // 使用 ref 创建了多个响应式数据
    let tableData = ref([]); // 表格数据
    const dialogVisible = ref(false); // 对话框可见性
    const dialogOverflowVisible = ref(false); // 溢出对话框可见性
    const createDialogOverflowVisible = ref(false); // 创建溢出对话框可见性
    const userName = ref(""); // 用户名
    const defaultProps = { // 默认属性
      children: "children",
      label: "label",
    };
    const editDialogOverflowVisible = ref(false); // 编辑溢出对话框可见性
    const showUserDetail = ref({ // 显示用户详情
      name: "",
      sex: "",
      birth: "",
      phone: "",
      political: "",
      education: "",
      department: "",
      position: "",
      entryTime: "",
      status: "",
    });
    const ruleFormRef = ref(); // 表单引用
    const userDetail = reactive({ // 用户详情，使用 reactive 创建响应式对象
      name: "",
      sex: "",
      birth: "",
      phone: "",
      political: "",
      education: "",
      department: "",
      position: "",
      entryTime: "",
      status: "",
    });
    const options = [ // 下拉选项
      { value: "在职", label: "在职" },
      { value: "离职", label: "离职" },
      { value: "兼职", label: "兼职" },
    ];
    const sexOptions = [ // 性别选项
      { value: "男", label: "男" },
      { value: "女", label: "女" },
    ];
    const choseId = ref(); // 选中的 ID
    // 初始化时获取人员管理数据
    async function getPeopleManagementData() {
      let data = await webRequest.people.getAllPeoleInfoMethod();
      console.log(data);
      tableData.value = data.data.data;
    }

    // 显示详情
    function handleDetail(index, row) {
      dialogOverflowVisible.value = true;
      console.log(row, "sdkjfhasldhfs");
      showUserDetail.value = row;
    }
    // 删除提示
    const showDeleteTip = (index, row) => {
      dialogVisible.value = true;
      choseId.value = row.id;
      console.log(index, row);
    };
    // 处理删除
    const handleDelete = async () => {
      let data = await webRequest.people.deletePeopleByIdMethod({
        id: choseId.value,
      });
      console.log(data);
      if (data.data.code == 200) {
        dialogVisible.value = false;
        getPeopleManagementData();
        ElMessage({
          message: "删除成功",
          grouping: true,
          type: "success",
        });
      }
    };
    // 处理编辑详情
    const handleEditDetail = (index, row) => {
      editDialogOverflowVisible.value = true;
      showUserDetail.value = row;
    };
    // 显示创建用户模态框
    const showCreatePeopleModel = () => {
      createDialogOverflowVisible.value = true;
    };
    // 定义校验规则
    const rules = reactive({
      name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
      birth: [{ required: true, message: "请输入出生年月", trigger: "blur" }],
      phone: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
          pattern: /^1[3456789]\d{9}$/,
          message: "手机号格式不正确",
          trigger: "blur",
        },
      ],
      political: [
        { required: true, message: "请输入政治面貌", trigger: "blur" },
      ],
      education: [
        { required: true, message: "请输入学历学校", trigger: "blur" },
      ],
      status: [{ required: true, message: "请输入目前状态", trigger: "blur" }],
      department: [
        { required: true, message: "请输入所在部门", trigger: "blur" },
      ],
    });

    // 提交表单
    const handleSubmit = async (formEl) => {
      ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          try {
            console.log(userDetail, ruleFormRef);
            let data = await webRequest.people.createPeopleMethod(
              userDetail
            );
            console.log(data);
            if (data.data.code == 200) {
              createDialogOverflowVisible.value = false;
              getPeopleManagementData();
              ElMessage({
                message: "新增成功",
                grouping: true,
                type: "success",
              });
              // 清空数据
              ruleFormRef.value.resetFields();
            } else {
              ElMessage({
                message: data.data.msg,
                grouping: true,
                type: "error",
              });
            }
          } catch (error) {
            ElMessage({
              message: "失败",
              grouping: true,
              type: "error",
            });
          }
        } else {
          ElNotification({
            message: "表单未通过校验",
            type: "error",
          });
          console.log("表单未通过校验");
          return false;
        }
      });
    };

    // 关闭对话框
    const handleClose = (done) => {
      dialogVisible.value = false;
      done();
    };
    // 选择出生日期
    const choseBirth = (val) => {
      userDetail.value.birth = val;
    };

    // 编辑用户信息
    const editUserInfo = async () => {
      let data = await webRequest.people.editPeopleMethod(
        showUserDetail.value
      );
      console.log(data);
      if (data.data.code == 200) {
        editDialogOverflowVisible.value = false;
        getPeopleManagementData();
        ElMessage({
          message: "编辑成功",
          grouping: true,
          type: "success",
        });
      }
    };

    // 初始化时获取数据
    getPeopleManagementData();

    // 返回需要暴露给模板的数据和方法
    return {
      getPeopleManagementData,
      tableData,
      dialogVisible,
      showDeleteTip,
      handleSubmit,
      dialogOverflowVisible,
      handleDetail,
      userDetail,
      handleDelete,
      rules,
      createDialogOverflowVisible,
      showCreatePeopleModel,
      handleClose,
      choseBirth,
      options,
      sexOptions,
      defaultProps,
      ruleFormRef,
      showUserDetail,
      editDialogOverflowVisible,
      handleEditDetail,
      editUserInfo,
    };
  },

};
</script>

<style lang="css" scoped>
.peopleManagement_box {
  background-color: white;
  padding: 20px;
}
</style>